<template>
  <div class="login-wrapper">
    <div class="box">
      <div class="left d-center">
        <img src="../assets/login-tuya.png" alt="" />
      </div>
      <div class="right d-center">
        <div class="login" v-show="loginBox">
          <div class="header">用户登录</div>
          <el-form :model="form" ref="form">
            <el-form-item prop="phone" label="" :rules="rules.phone">
              <el-input v-model="form.phone" placeholder="请输入手机号">
                <template slot="prepend"><i class="el-icon-user"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item prop="pwd" label="" :rules="rules.pwd">
              <el-input type="password" show-password v-model="form.pwd" placeholder="请输入密码">
                <template slot="prepend"><i class="el-icon-lock"></i></template>
              </el-input>
            </el-form-item>
            <div class="d-flex space-between mb-2">
              <span><el-checkbox v-model="checked">记住密码</el-checkbox></span>
              <span>忘记密码？</span>
            </div>
            <el-button type="primary" @click="submitForm('form')" class="w100">登录</el-button>
          </el-form>
          <p class="mt-3 fs14">没有账号？<span @click="toggleRegisterLogin" class="deepBlue">立即注册</span></p>
          <div class="d-flex d-center flex-start mt-2 fs14" style="display: none;">
            <div class="mr-2">第三方登录</div>
            <div class="img-box"><img src="../assets/qq.png" alt="" /></div>
          </div>
        </div>
        <div class="register" v-show="registerBox">
          <div class="header">用户注册</div>
          <Register></Register>
          <p class="mt-1 fs14">
            已有账号，<span @click="toggleRegisterLogin" class="deepBlue">立即登录</span>
            <el-popover placement="right" width="250" trigger="click">
              <div class="d-center flex-column">
                <div class="hd bold">扫二维码，加客服微信，获取邀请码</div>
                <!-- <img src="https://s3.ax1x.com/2021/02/19/yhEBbF.jpg" alt="" width="150px" /> -->
                <img :src="QRcodeURL" alt="" width="150px" />
              </div>
              <el-button size="medium" type="text" slot="reference" class="ml-1 deepBlue">申请邀请码</el-button>
            </el-popover>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Register from "@/views/Register.vue";
import md5 from "md5";
import Cookies from "js-cookie";
import lf from "localforage";
export default {
  name: "login",
  components: {
    Register,
  },
  data() {
    return {
      checked: true,
      loginBox: true,
      registerBox: false,
      form: {
        phone: "",
        pwd: "",
        qq: "",
      },
      // 输入校验
      rules: {
        phone: [{ required: true, message: "请输入11位手机号", trigger: "blur" }],
        pwd: { required: true, message: "请输入密码", trigger: "blur" },
      },
      QRcodeURL: process.env.VUE_APP_API_URL + "serviceQrCode",
    };
  },
  mounted() {
    this.getCookies();
    this.rememberPW();
  },
  beforeUpdate() {
    this.init();
  },
  methods: {
    async init() {
      // 注册成功后，登录框自动填充刚刚注册的账号密码
      let tempUser = await lf.getItem("tempUser");
      if (tempUser) {
        // 注册成功后，清除前面的 cookies
        Cookies.remove("phone");
        Cookies.remove("pwd");
        this.$set(this.form, "phone", tempUser.phone);
        this.$set(this.form, "pwd", tempUser.pwd);
        await lf.setItem("tempUser", "");
      }
    },
    getCookies() {
      if (Cookies.get("name")) {
        // console.log(Cookies.get("name"), "得到cookies了");
        this.$set(this.form, "phone", Cookies.get("phone"));
        this.$set(this.form, "pwd", Cookies.get("pwd"));
      }
    },
    // 登陆注册显示隐藏
    toggleRegisterLogin() {
      this.loginBox = !this.loginBox;
      this.registerBox = !this.registerBox;
    },
    setCookies() {
      if (this.checked && !Cookies.get("phone")) {
        // 记住密码有效期为 3 天
        Cookies.set("phone", this.form.phone, { expires: 3 });
        Cookies.set("pwd", this.form.pwd, { expires: 3 });
        // console.log(Cookies.get("name"), "设置cookies了");
      }
    },
    // 记住密码
    rememberPW() {
      if (this.checked) {
        this.form.phone = Cookies.get("phone");
        this.form.pwd = Cookies.get("pwd");
      }
    },
    // 登录
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return;

        let pwd = md5(this.form.pwd);
        let opt = this.form;
        const formData = new FormData();
        formData.append("phone", opt.phone);
        formData.append("pwd", pwd);
        const { data: res } = await this.$http.post("login", formData);
        // console.log(res);
        if (res.code != "0") return this.$message.error(res.msg);

        this.$message.success("登录成功");
        this.setCookies();
        res.data.pwd = opt.pwd;
        this.$store.commit("Login", res.data);
        this.$router.push("/");
      });
    },
  },
};
</script>

<style lang="scss">
.login-wrapper {
  background: url(../assets/bg-pc.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 50%;
    height: 480px;
    display: flex;
    .left {
      width: 50%;
      img {
        width: 80%;
      }
    }
    .right {
      width: 50%;
      p {
        span {
          cursor: pointer;
        }
      }
      .img-box {
        width: 32px;
        height: 32px;
        img {
          width: 100%;
          border: 1px solid rgba(213, 213, 213, 1);
          border-radius: 50%;
        }
      }
      .header {
        font-size: 2rem;
        color: #636363;
        text-align: start;
        margin-bottom: 15px;
      }
    }
  }
}
.el-popover {
  .hd {
    margin: 5px 0 10px;
  }
}
</style>
